import React from 'react';
import { Button, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import tu from '../../img/1.png'
import tu1 from '../../img/2.png'
import tu2 from '../../img/3.png'

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: '全部订单',
    children: [
      <div>
        {/* 1 */}
        <div style={{ width: '320px' }}>
          <p style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: '#ccc' }}>2018-1-2</span>
            <span>待发货</span>
          </p>
          <hr />
          <dl style={{ display: 'flex', justifyContent: 'space-around' }}>
            <dt>
              <img style={{ width: '60px', height: "60px" }} src={tu} alt="" />
            </dt>
            <dd>
              <h3 style={{ display: 'flex', justifyContent: 'space-between' }}>莫次有机PWE活性美白洗面奶 <span>￥169</span></h3>
              <h5 style={{ display: 'flex', justifyContent: 'space-between' }}>优惠套餐<span style={{ color: '#ccc' }}>×2</span></h5>
              <p style={{ color: '#ccc', fontSize: '10px' }}>标准套餐:蓝色</p>
            </dd>
          </dl>
          <hr />
          <p style={{ marginLeft: "30px", fontSize: '5px', fontWeight: 'bold' }}>共有2件商品,合计:￥338.00(含运费￥0.00)</p>
        </div>
        {/* 2 */}
        <div style={{ width: '320px' }}>
          <p style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: '#ccc' }}>2017-11-25</span>
            <span>待发货</span>
          </p>
          <hr />
          <dl style={{ display: 'flex', justifyContent: 'space-around' }}>
            <dt>
              <img style={{ width: '60px', height: "60px" }} src={tu1} alt="" />
            </dt>
            <dd>
              <h3 style={{ display: 'flex', justifyContent: 'space-between' }}>莫次有机PWE活性美白洗面奶 <span>￥169</span></h3>
              <h5 style={{ display: 'flex', justifyContent: 'space-between' }}>优惠套餐<span style={{ color: '#ccc' }}>×2</span></h5>
              <p style={{ color: '#ccc', fontSize: '10px' }}>标准套餐:红色</p>
            </dd>
          </dl>
          <hr />
          <p style={{ marginLeft: "30px", fontSize: '5px', fontWeight: 'bold' }}>共有2件商品,合计:￥169.00(含运费￥0.00)
            <Button>我要催单</Button>
            <Button>查看物流</Button>
            <Button style={{ color: '#82aee7ff', border: '82aee7ff 1px solid' }}>确认收货</Button>
          </p>
        </div>
        {/* 3 */}
        <div style={{ width: '320px' }}>
          <p style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: '#ccc' }}>2017-11-25</span>
            <span>待发货</span>
          </p>
          <hr />
          <dl style={{ display: 'flex', justifyContent: 'space-around' }}>
            <dt>
              <img style={{ width: '60px', height: "60px" }} src={tu2} alt="" />
            </dt>
            <dd>
              <h3 style={{ display: 'flex', justifyContent: 'space-between' }}>莫次有机PWE活性美白洗面奶 <span>￥169</span></h3>
              <h5 style={{ display: 'flex', justifyContent: 'space-between' }}>优惠套餐<span style={{ color: '#ccc' }}>×2</span></h5>
              <p style={{ color: '#ccc', fontSize: '10px' }}>标准套餐:紫色</p>
            </dd>
          </dl>
          <hr />
          <p style={{ marginLeft: "30px", fontSize: '5px', fontWeight: 'bold' }}>共有2件商品,合计:￥169.00(含运费￥0.00)
            <Button>我要催单</Button>
            <Button>查看物流</Button>
            <Button style={{ color: '#82aee7ff', border: '82aee7ff 1px solid' }}>确认收货</Button>
          </p>
        </div>
      </div>
    ]
  },
  {
    key: '2',
    label: '待付款',
    children: '待付款',
  },
  {
    key: '3',
    label: '待发货',
    children: '待发货',
  },
  {
    key: '4',
    label: '待收货',
    children: '待收货',
  },
];

const App: React.FC = () => <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;

export default App;